<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Border Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<!-- 	<script type="text/javascript" src="../jquery.easyui.min.js"></script> -->
<script type="text/javascript" src="../easyloader.js"></script>
<!-- <script type="text/javascript" src="../plugins/jquery.panel.js"></script> -->
<!-- <script type="text/javascript" src="../plugins/jquery.resizable.js"></script> -->
<!-- <script type="text/javascript" src="../plugins/jquery.layout.js"></script> -->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
	$(function() {
		// 			var p = $('body').layout('panel', 'west').panel({
		// 				onCollapse : function() {
		// 					// 				alert('collapse');
		// 				}
		// 			});
		// 		alert($('#test').outerWidth());
	});
</script>
</head>
<body class="easyui-layout">
	<div region="north" border="false"
		style="height: 60px; background: #B3DFDA; padding: 10px">north
		region</div>
	<div id="test" region="west" split="true" title="West"
		style="width: 150px; padding: 10px;">west content</div>
	<div region="east" split="true" collapsed="true" title="East"
		style="width: 100px; padding: 10px;">east region</div>
	<div region="south" border="false"
		style="height: 50px; background: #A9FACD; padding: 10px;">south
		region</div>
	<div region="center" title="Main Title"></div>
</body>
</html>